import React, {useState} from "react";
import {Avatar, Button, Dropdown, Layout, Nav, Typography} from "@douyinfe/semi-ui";
import {IconBell, IconHelpCircle, IconSemiLogo, IconSun, IconMoon} from "@douyinfe/semi-icons";
import {useDispatch, useSelector} from "react-redux";
import {resourcePath} from "../../config";
import {Link} from "react-router-dom";
import {UserControllerService} from "../../service";
import {logout} from "../../stores/userReducer";

const GlobalHeader: React.FC = () => {
    const {Text} = Typography;
    const {Header} = Layout;
    const dispatch = useDispatch()
    const [light, setLight] = useState(true);
    //@ts-ignore
    const userInfo = useSelector((state) => state.user.userInfo);
    const changeTheme = () => {
        const body = document.body;
        if (!body.hasAttribute('theme-mode')) {
            setLight(false);
            body.setAttribute('theme-mode', 'dark');
        } else {
            setLight(true);
            body.removeAttribute('theme-mode');
        }
    }
    const userLogout = async () => {
        await UserControllerService.userLogout();
        dispatch(logout());
    }
    return (
        <Header style={{backgroundColor: 'var(--semi-color-bg-1)'}}>
            <div>
                <Nav mode="horizontal" defaultSelectedKeys={['Home']}>
                    <Nav.Header link={'/'}>
                        <IconSemiLogo style={{height: '36px', fontSize: 36}}/>
                    </Nav.Header>
                    <span
                        style={{
                            color: 'var(--semi-color-text-2)',
                        }}
                    >
                        <span>尘轩文档</span>
                    </span>

                    <Nav.Footer>
                        <Button
                            theme="borderless"
                            icon={<IconBell size="large"/>}
                            style={{
                                color: 'var(--semi-color-text-2)',
                                marginRight: '12px',
                            }}
                        />
                        <Button onClick={changeTheme}
                                theme="borderless"
                                icon={light ? <IconSun/> : <IconMoon/>}
                                style={{
                                    color: 'var(--semi-color-text-2)',
                                    marginRight: '12px',
                                }}
                        />
                        <Button
                            theme="borderless"
                            icon={<IconHelpCircle size="large"/>}
                            style={{
                                color: 'var(--semi-color-text-2)',
                                marginRight: '12px',
                            }}
                        />
                        <Dropdown
                            render={
                                <Dropdown.Menu>
                                    <Link
                                        style={{textDecoration: "none"}}
                                        // @ts-ignore
                                        to={'/user/information'}
                                    >
                                        <Dropdown.Item><Text>基本信息</Text></Dropdown.Item>
                                    </Link>

                                    {userInfo ?
                                        <Dropdown.Item onClick={userLogout}><Text
                                            type="warning">退出登录</Text></Dropdown.Item> :
                                        <Link
                                            style={{textDecoration: "none"}}
                                            // @ts-ignore
                                            to={'/user/login'}
                                        >
                                            <Dropdown.Item><Text>登录</Text></Dropdown.Item>
                                        </Link>}


                                </Dropdown.Menu>
                            }
                        >
                            {userInfo ? <Avatar color="orange" size="small" src={resourcePath + userInfo.userAvatar}>
                                {userInfo && userInfo.userName}
                            </Avatar> : <Avatar>未登录</Avatar>}
                        </Dropdown>

                    </Nav.Footer>
                </Nav>
            </div>
        </Header>
    );
}
export default GlobalHeader;
